<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--忽略页面中的邮箱格式为邮箱-->
    <meta name="format-detection" content="email=no">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no,address=no,email=no">
    <title>指导方案</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <link rel="stylesheet" href="../css/myswiper.min.css">
    <link rel="stylesheet" href="../css/guid_sch.css">
</head>
<body style="font-family: myFont;">
<div class="coverLayer">
    <p class="layerText">
        左右滑动切换内容
    </p>
    <img src="../images/icon/silde_icon.png" alt="" class="layerImg">
    <div class="layerBtn">
        <a href="#">知道了</a>
    </div>
</div>
<div id="top">
    <div class="swiper-container" id="nav">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <span style="color:rgba(255, 83, 11, 1);">活动介绍</span></div>
            <div class="swiper-slide">
                <span>物料准备</span></div>
            <div class="swiper-slide">
                <span>前期准备</span></div>
            <div class="swiper-slide">
                <span>现场准备</span></div>
            <div class="swiper-slide">
                <span>现场流程</span></div>
        </div>
    </div>
</div>
<div class="swiper-container" id="page">
    <div class="swiper-wrapper">
        <div class="swiper-slide slidepage">
            <div class="swiper-container scroll" id="scroll-v1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide slidescroll">
                        <div class="guid_li">
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">活动名称:</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        阅读点亮精彩童年
                                    </p>
                                </div>
                            </div>
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">适用渠道:</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        入园体验活动
                                    </p>
                                </div>
                            </div>
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">活动目标:</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        1、为**（公园、大型商场名字）引流，共 同提升**机构（商家、商场名字）和**幼儿园在**地区的品牌影响力和知名度。 <br>
                                        2、让幼儿喜欢阅读、爱上阅读。
                                    </p>
                                </div>
                            </div>
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">目标人群:</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        2岁以上 20—30组家庭
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide slidepage">
            <div class="swiper-container scroll" id="scroll-v2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide slidescroll">
                        <div class="guid_li">
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">签到处:</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        1、音乐《爸爸瞧妈妈看宝宝的小手真好看》 <br>
                                        2、大的串珠和绳子 <br>
                                        3、彩色纸若干 <br>
                                        4、一次性纸盘 <br>
                                        5、A4硬卡纸人手一张 6、彩笔若干 <br>
                                        7、皮球人手一个、纸箱三个、拱形门三个
                                    </p>
                                </div>
                            </div>
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">活动准备:</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        1、音乐《爸爸瞧妈妈看宝宝的小手真好看》 <br>
                                        2、大的串珠和绳子 <br>
                                        3、彩色纸若干 <br>
                                        4、一次性纸盘 <br>
                                        5、A4硬卡纸人手一张 <br>
                                        6、彩笔若干 <br>
                                        7、皮球人手一个、纸箱三个、拱形门三个
                                    </p>
                                </div>
                            </div>
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">餐点准备:</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        1、音乐《爸爸瞧妈妈看宝宝的小手真好看》 <br>
                                        2、大的串珠和绳子 <br>
                                        3、彩色纸若干 <br>
                                        4、一次性纸盘 <br>
                                        5、A4硬卡纸人手一张 <br>
                                        6、彩笔若干 <br>
                                        7、皮球人手一个、纸箱三个、拱形门三个
                                    </p>
                                </div>
                            </div>
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">其他:</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        1、音乐《爸爸瞧妈妈看宝宝的小手真好看》 <br>
                                        2、大的串珠和绳子 <br>
                                        3、彩色纸若干 <br>
                                        4、一次性纸盘 <br>
                                        5、A4硬卡纸人手一张 <br>
                                        6、彩笔若干 <br>
                                        7、皮球人手一个、纸箱三个、拱形门三个
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide slidepage">
            <div class="swiper-container scroll" id="scroll-v3">
                <div class="swiper-wrapper">
                    <div class="swiper-slide slidescroll">
                        <div class="guid_li">
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">时间:</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        提前一天 电话通知家长
                                    </p>
                                </div>
                            </div>
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">关键点:</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        语调亲切适中，有电话记录
                                    </p>
                                </div>
                            </div>
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">具体内容:</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        1.上午电话提示家长参加入园准备，并统计参加人数。如不能按时参加问明原因并记录，邀请其参加下次活动。
                                        <br><br>
                                        2.人数不够时及时邀约其他家长参加。 话术：
                                        亲爱的XXX小朋友家长您好，明天上午（XX点）幼儿园丰富多彩的入园体验活动就开始了，请您提前10分钟带宝贝入园。幼儿园里为宝贝准备了充足的饮用水，保证宝贝足够喝水量，请您今晚和宝贝早点睡觉哦，明天精神充沛一起来幼儿参加好玩的游戏活动。（如自制点心，请在以上话术中补充）
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide slidepage">
            <div class="swiper-container scroll" id="scroll-v4">
                <div class="swiper-wrapper">
                    <div class="swiper-slide slidescroll">
                        <div class="guid_li">
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">具体内容:</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        确认背景音乐、话筒、音响设备、准备到位并能正常使用和播放，音控人员负责所有有关设备使用和播放。
                                    </p>
                                    <p class="point">
                                        关键点：所有音乐按照播放顺序储存在播放器（可准备2个备用）
                                    </p>
                                </div>
                            </div>
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">签到处：</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        1、户外游戏区：摆放户外游戏物品，张贴户外玩具安全提示，告知家长和幼儿注意安全，老师巡视指导。<br>
                                        2、室内暖场区：摆放儿童桌椅，桌上摆放好各类手头玩具，供幼儿进入等待区游戏。
                                    </p>
                                    <p class="point">
                                        关键点：品牌露出 摆放合理
                                    </p>
                                </div>
                            </div>
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">等待区:</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        1、户外游戏区：摆放户外游戏物品，张贴户外玩具安全提示，告知家长和幼儿注意安全，老师巡视指导。<br>
                                        2、室内暖场区：摆放儿童桌椅，桌上摆放好各类手头玩具，供幼儿进入等待区游戏。
                                    </p>
                                    <p class="point">
                                        关键点：品牌露出 摆放合理
                                    </p>
                                </div>
                            </div>
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">检查：</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        检查活动需要的材料到位、老师准备工作到位。
                                    </p>
                                    <p class="point">
                                        关键点：摆放合理 活动物品摆放整齐
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide slidepage">
            <div class="swiper-container scroll" id="scroll-v5">
                <div class="swiper-wrapper">
                    <div class="swiper-slide slidescroll">
                        <div class="guid_li">
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">签到处:</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        1、教师穿园服精神饱满，面带微笑，主动热情问好。（签到处负责人话术：上午好（下午好）欢迎XXX宝贝和家长来到XX幼儿园） <br>
                                        2、提示家长穿上一次性鞋套。 <br>
                                        3、引导家长为幼儿签到。 <br>
                                        4、为孩子贴姓名贴（位置：前胸），便于教师能准确叫出幼儿姓名 <br>
                                        5、引导现场到达未报名的家长扫二维码进行活动报名。 <br>

                                    </p>
                                    <p class="point">
                                        关键点：所有音乐按照播放顺序储存在播放器（可准备2个备用）
                                    </p>
                                </div>
                            </div>
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">晨检处：</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        1、保健医穿专业医护服装，带口罩，态度亲切、主动热情与幼儿家长打招呼为幼儿做入园常规检查。 <br>
                                        2、保健医主动热情为幼儿测查体温、看手、口，并引导幼儿和家长使用消毒液洗手，使用指导语。（话术：搓搓小手，讲卫生）

                                    </p>
                                </div>
                            </div>
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">等待区:</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        由1名教师引导早来的幼儿与家长到达等待区，接待组老师给家长热情与幼儿游戏，主动与家长沟通，关注每个幼儿，并维护现场秩序。
                                    </p>
                                    <p class="point_text">
                                        关键点： <br>
                                        1. 统一品牌露出 <br>
                                        2. 如幼儿体温状况异常跟家长协商建议休息 <br>
                                        3. 课程/接待咨询组所有老师到场维护现场秩序一起互动
                                    </p>
                                    <span class="line_span"></span>
                                </div>
                            </div>
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">活动场地:</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        可选择户外/大型多功能厅/阳光房等 <br><br>
                                        1.开场热身舞蹈。 主持人：
                                        小朋友们好，家长们好，请家长们领着小朋友到我身边来，其他老师协助将室内外游戏区的小朋友集合到一起。（教育咨询顾问介绍今天和小朋友一起玩游戏的老师）这是XXX老师......（主要介绍课程组老师）
                                        音乐律动《 快乐宝贝 》（可选用幼儿园歌或园内间操）<br><br>
                                        2、点名字——认识环节： 老师引导幼儿及家长入座，打招呼“问好”，逐一请幼儿说一说自己的名字，老师给予鼓励
                                        师：小朋友们好，我的名字叫XXX,小朋友可以叫我XXX老师，很高兴认识小朋友们。接下来老师来认识一下小朋友的名字吧。 建议介绍形式一：老师可逐一来到幼儿身边询问
                                        建议介绍形式二：老师可逐一请小朋友站到前面来介绍自己<br><br>
                                        3、我的小手 播放音乐律动《爸爸瞧妈妈看、宝宝的小手真好看》，边听音乐边做动作，可鼓励幼儿一起跟着老师律动，引出小手主题 主持人：老师准备了一段好听的音乐，我们一起听一听吧
                                        “爸爸瞧妈妈看，宝宝的小手真好看；爸爸瞧妈妈看，宝宝的小手看不见，爸爸妈妈都来看，宝宝的小手又出现”宝贝们看看我们的小手长什么样子呀？

                                    </p>
                                    <p class="point_text">
                                        关键点： <br>
                                        课程/接待咨询组所有老师到场维护现场秩序一起互动
                                    </p>
                                    <span class="line_span"></span>
                                </div>
                            </div>
                            <div class="intr_div">
                                <div class="intr_text">
                                    <p>
                                        1、写完名字的小朋友进行洗手、如厕。（生活老师要在盥洗室里，提示幼儿排队，教给幼儿如何洗手，洗完后给幼儿递纸巾擦手。）<br>
                                        2、洗手出来的孩子，配班老师帮助幼儿拿水杯，喝少许温开水。

                                    </p>
                                    <p class="point_text">
                                        关键点： <br>
                                        使用专业指导语，关注个别幼儿
                                    </p>
                                    <span class="line_span"></span>
                                </div>
                            </div>
                            <div class="intr_div">
                                <div class="intr_tit clearfix">
                                    <span class="fl line_sp"></span>
                                    <h3 class="fl title_h">我的小手真能干:</h3>
                                </div>
                                <div class="intr_text">
                                    <p>
                                        1.教师引导幼儿观察自己的小手，学说手指谣《大拇哥》，2-3遍 师：小朋友看看我们手上长着手指头，他们叫什么名字呢？我们一起玩个手指谣吧。
                                        大拇哥、二拇第、中三娘、四小弟、小妞妞、去看戏，手心手背，心肝宝贝。<br>
                                        2.教师出示小手做事的图片“引导宝宝讨论“自己的小手会做什么”,鼓励幼儿大胆发言， <br>
                                        师：小朋友们你们的小手特别的能干、刚才和老师一起做手指谣、玩律动，小朋友想一想你的小手还会做什么？——引导幼儿调动已有经验，会刷牙、会洗脸、会穿鞋、会吃饭…… <br>
                                        3.老师将幼儿的发言记录并做总结，鼓励幼儿尝试分组操作“串项链”、“撕面条”、“画小手”
                                        --配班老师将桌子摆成三组，分别为“串项链”组，“撕面条”组，“画小手”组；引导幼儿自由选择小组延伸活动“小手真能干”<br>
                                        师：小朋友们的小手真能干，接下来我们就用能干的小手给爸爸、妈妈做个礼物好吗？<br>
                                        --老师分别介绍三个组材料如何操作，老师边介绍边演示，请小朋友自选区域操作开始操作
                                        师：小朋友们这里可以穿珠子给妈妈做“项链”；这里可以给爸爸做“面条”吃；这里可以和爸爸妈妈一起“画小手”，做一个漂亮的小手贺卡。<br>
                                        --教师分组轮流指导，鼓励幼儿大胆操作

                                    </p>
                                    <p class="point_text">
                                        关键点： <br>
                                        1.熟知活动内容，活动流程自然过渡，教师配合默契 <br>
                                        2.教师精神状态良好，态度热情大方、使用专业指导语
                                    </p>
                                    <span class="line_span"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/myswiper.min.js"></script>
<script>
    //暂时设计每个slide大小需要一致
    barwidth = 36 //导航橙色条的长度px
    tSpeed = 300 //切换速度300ms
    var navSwiper = new Swiper('#nav', {
        slidesPerView: 4,
        freeMode: true,
        on: {
            init: function () {
                console.log("----init-----")
                navSlideWidth = this.slides.eq(0).css('width'); //导航字数需要统一,每个导航宽度一致
                bar = this.$el.find('.bar')
                bar.css('width', navSlideWidth)
                bar.transition(tSpeed)
                navSum = this.slides[this.slides.length - 1].offsetLeft //最后一个slide的位置

                clientWidth = parseInt(this.$wrapperEl.css('width')) //Nav的可视宽度
                navWidth = 0
                for (i = 0; i < this.slides.length; i++) {
                    navWidth += parseInt(this.slides.eq(i).css('width'))
                }

                topBar = this.$el.parents('body').find('#top') //页头
                $('#page').animate({scrollTop: 0},10);

            },

        },
    });

    var pageSwiper = new Swiper('#page', {
        watchSlidesProgress: true,
        resistanceRatio: 0,
        on: {
            touchMove: function () {
                progress = this.progress
                bar.transition(0)
                bar.transform('translateX(' + navSum * progress + 'px)')
                //粉色255,72,145灰色51,51,51
                for (i = 0; i < this.slides.length; i++) {
                    slideProgress = this.slides[i].progress
                    if (Math.abs(slideProgress) < 1) {
                        r = Math.floor((255 - 153) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 153)
                        g = Math.floor((83 - 153) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 153)
                        b = Math.floor((11 - 153) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 153)
                        navSwiper.slides.eq(i).find('span').css('color', 'rgba(' + r + ',' + g + ',' + b + ',1)')
                    }
                }
            },
            transitionStart: function () {
                console.log("----transitionStart-----")
                activeIndex = this.activeIndex
                activeSlidePosition = navSwiper.slides[activeIndex].offsetLeft
                //释放时导航粉色条移动过渡
                bar.transition(tSpeed)
                bar.transform('translateX(' + activeSlidePosition + 'px)')
                //释放时文字变色过渡
                navSwiper.slides.eq(activeIndex).find('span').transition(tSpeed)
                navSwiper.slides.eq(activeIndex).find('span').css('color', 'rgba(255, 83, 11, 1)')
                if (activeIndex > 0) {
                    navSwiper.slides.eq(activeIndex - 1).find('span').transition(tSpeed)
                    navSwiper.slides.eq(activeIndex - 1).find('span').css('color', 'rgba(153, 153, 153, 1)')
                }
                if (activeIndex < this.slides.length) {
                    navSwiper.slides.eq(activeIndex + 1).find('span').transition(tSpeed)
                    navSwiper.slides.eq(activeIndex + 1).find('span').css('color', 'rgba(153, 153, 153, 1)')
                }
                //导航居中
                navActiveSlideLeft = navSwiper.slides[activeIndex].offsetLeft //activeSlide距左边的距离

                navSwiper.setTransition(tSpeed)
                if (navActiveSlideLeft < (clientWidth - parseInt(navSlideWidth)) / 2) {
                    navSwiper.setTranslate(0)
                } else if (navActiveSlideLeft > navWidth - (parseInt(navSlideWidth) + clientWidth) / 2) {
                    navSwiper.setTranslate(clientWidth - navWidth)
                } else {
                    navSwiper.setTranslate((clientWidth - parseInt(navSlideWidth)) / 2 - navActiveSlideLeft)
                }
                $('#page').animate({scrollTop: 0},10);

            },
        }
    });

    navSwiper.$el.on('touchstart', function (e) {
        e.preventDefault() //去掉按压阴影
    })
    navSwiper.on('tap', function (e) {
        console.log("----tap-----")
        clickIndex = this.clickedIndex
        clickSlide = this.slides.eq(clickIndex)
        pageSwiper.slideTo(clickIndex, 0);
        this.slides.find('span').css('color', 'rgba(153, 153, 153, 1)');
        clickSlide.find('span').css('color', 'rgba(255,83,11,1)');
    })

    //内容滚动
    var scrollSwiper = new Swiper('#scroll-v1', {
        //65是头部的高
        //36是top地址和搜索的高

        slidesOffsetBefore: 72,
        direction: 'vertical',
        freeMode: true,
        slidesPerView: 'auto',

        mousewheel: {
            releaseOnEdges: true,
        },
        on: {
            touchMove: function () {

                if (this.translate > 72 - 36 && this.translate < 72) {
                    topBar.transform('translateY(' + (this.translate - 72) + 'px)');
                }

            },
            touchStart: function () {
                startPosition = this.translate
            },
            touchEnd: function () {
                console.log("----touchEnd-----")
                topBar.transition(tSpeed)
                $('#page').animate({scrollTop: 0},10);
                if (this.translate > 36 && this.translate < 72 && this.translate < startPosition) {
                    topBar.transform('translateY(-36px)');
                    for (sc = 0; sc < scrollSwiper.length; sc++) {
                        if (scrollSwiper[sc].translate > 36) {
                            scrollSwiper[sc].setTransition(tSpeed);
                            scrollSwiper[sc].setTranslate(36)
                        }
                    }
                }
                if (this.translate > 36 && this.translate < 72 && this.translate > startPosition) {
                    topBar.transform('translateY(0px)');
                    for (sc = 0; sc < scrollSwiper.length; sc++) {
                        if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
                            scrollSwiper[sc].setTransition(tSpeed);
                            scrollSwiper[sc].setTranslate(72)
                        }
                    }
                }
            },

            transitionStart: function () {

                topBar.transition(tSpeed)
                if (this.translate < 72 - 36) {
                    topBar.transform('translateY(-36px)');
                    if (scrollSwiper) {
                        for (sc = 0; sc < scrollSwiper.length; sc++) {
                            if (scrollSwiper[sc].translate > 36) {
                                scrollSwiper[sc].setTransition(tSpeed);
                                scrollSwiper[sc].setTranslate(36)
                            }
                        }
                    }

                } else {
                    topBar.transform('translateY(0px)');

                    if (scrollSwiper) {
                        for (sc = 0; sc < scrollSwiper.length; sc++) {
                            if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
                                scrollSwiper[sc].setTransition(tSpeed);
                                scrollSwiper[sc].setTranslate(72)
                            }
                        }
                    }
                }
            },
        }

    })
    //内容滚动
    var scrollSwiper = new Swiper('#scroll-v2', {
        //65是头部的高
        //36是top地址和搜索的高

        slidesOffsetBefore: 72,
        direction: 'vertical',
        freeMode: true,
        slidesPerView: 'auto',

        mousewheel: {
            releaseOnEdges: true,
        },
        on: {
            touchMove: function () {

                if (this.translate > 72 - 36 && this.translate < 72) {
                    topBar.transform('translateY(' + (this.translate - 72) + 'px)');
                }

            },
            touchStart: function () {
                startPosition = this.translate
            },
            touchEnd: function () {
                console.log("----touchEnd-----")
                topBar.transition(tSpeed)
                $('#page').animate({scrollTop: 0},10);
                if (this.translate > 36 && this.translate < 72 && this.translate < startPosition) {
                    topBar.transform('translateY(-36px)');
                    for (sc = 0; sc < scrollSwiper.length; sc++) {
                        if (scrollSwiper[sc].translate > 36) {
                            scrollSwiper[sc].setTransition(tSpeed);
                            scrollSwiper[sc].setTranslate(36)
                        }
                    }
                }
                if (this.translate > 36 && this.translate < 72 && this.translate > startPosition) {
                    topBar.transform('translateY(0px)');
                    for (sc = 0; sc < scrollSwiper.length; sc++) {
                        if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
                            scrollSwiper[sc].setTransition(tSpeed);
                            scrollSwiper[sc].setTranslate(72)
                        }
                    }
                }
            },

            transitionStart: function () {

                topBar.transition(tSpeed)
                if (this.translate < 72 - 36) {
                    topBar.transform('translateY(-36px)');
                    if (scrollSwiper) {
                        for (sc = 0; sc < scrollSwiper.length; sc++) {
                            if (scrollSwiper[sc].translate > 36) {
                                scrollSwiper[sc].setTransition(tSpeed);
                                scrollSwiper[sc].setTranslate(36)
                            }
                        }
                    }

                } else {
                    topBar.transform('translateY(0px)');

                    if (scrollSwiper) {
                        for (sc = 0; sc < scrollSwiper.length; sc++) {
                            if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
                                scrollSwiper[sc].setTransition(tSpeed);
                                scrollSwiper[sc].setTranslate(72)
                            }
                        }
                    }
                }
            },
        }

    })
    //内容滚动
    var scrollSwiper = new Swiper('#scroll-v3', {
        //65是头部的高
        //36是top地址和搜索的高

        slidesOffsetBefore: 72,
        direction: 'vertical',
        freeMode: true,
        slidesPerView: 'auto',

        mousewheel: {
            releaseOnEdges: true,
        },
        on: {
            touchMove: function () {

                if (this.translate > 72 - 36 && this.translate < 72) {
                    topBar.transform('translateY(' + (this.translate - 72) + 'px)');
                }

            },
            touchStart: function () {
                startPosition = this.translate
            },
            touchEnd: function () {
                console.log("----touchEnd-----")
                topBar.transition(tSpeed)
                $('#page').animate({scrollTop: 0},10);
                if (this.translate > 36 && this.translate < 72 && this.translate < startPosition) {
                    topBar.transform('translateY(-36px)');
                    for (sc = 0; sc < scrollSwiper.length; sc++) {
                        if (scrollSwiper[sc].translate > 36) {
                            scrollSwiper[sc].setTransition(tSpeed);
                            scrollSwiper[sc].setTranslate(36)
                        }
                    }
                }
                if (this.translate > 36 && this.translate < 72 && this.translate > startPosition) {
                    topBar.transform('translateY(0px)');
                    for (sc = 0; sc < scrollSwiper.length; sc++) {
                        if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
                            scrollSwiper[sc].setTransition(tSpeed);
                            scrollSwiper[sc].setTranslate(72)
                        }
                    }
                }
            },

            transitionStart: function () {

                topBar.transition(tSpeed)
                if (this.translate < 72 - 36) {
                    topBar.transform('translateY(-36px)');
                    if (scrollSwiper) {
                        for (sc = 0; sc < scrollSwiper.length; sc++) {
                            if (scrollSwiper[sc].translate > 36) {
                                scrollSwiper[sc].setTransition(tSpeed);
                                scrollSwiper[sc].setTranslate(36)
                            }
                        }
                    }

                } else {
                    topBar.transform('translateY(0px)');

                    if (scrollSwiper) {
                        for (sc = 0; sc < scrollSwiper.length; sc++) {
                            if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
                                scrollSwiper[sc].setTransition(tSpeed);
                                scrollSwiper[sc].setTranslate(72)
                            }
                        }
                    }
                }
            },
        }

    })
    //内容滚动
    var scrollSwiper = new Swiper('#scroll-v4', {
        //65是头部的高
        //36是top地址和搜索的高

        slidesOffsetBefore: 72,
        direction: 'vertical',
        freeMode: true,
        slidesPerView: 'auto',

        mousewheel: {
            releaseOnEdges: true,
        },
        on: {
            touchMove: function () {

                if (this.translate > 72 - 36 && this.translate < 72) {
                    topBar.transform('translateY(' + (this.translate - 72) + 'px)');
                }

            },
            touchStart: function () {
                startPosition = this.translate
            },
            touchEnd: function () {
                console.log("----touchEnd-----")
                topBar.transition(tSpeed)
                $('#page').animate({scrollTop: 0},10);
                if (this.translate > 36 && this.translate < 72 && this.translate < startPosition) {
                    topBar.transform('translateY(-36px)');
                    for (sc = 0; sc < scrollSwiper.length; sc++) {
                        if (scrollSwiper[sc].translate > 36) {
                            scrollSwiper[sc].setTransition(tSpeed);
                            scrollSwiper[sc].setTranslate(36)
                        }
                    }
                }
                if (this.translate > 36 && this.translate < 72 && this.translate > startPosition) {
                    topBar.transform('translateY(0px)');
                    for (sc = 0; sc < scrollSwiper.length; sc++) {
                        if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
                            scrollSwiper[sc].setTransition(tSpeed);
                            scrollSwiper[sc].setTranslate(72)
                        }
                    }
                }
            },

            transitionStart: function () {

                topBar.transition(tSpeed)
                if (this.translate < 72 - 36) {
                    topBar.transform('translateY(-36px)');
                    if (scrollSwiper) {
                        for (sc = 0; sc < scrollSwiper.length; sc++) {
                            if (scrollSwiper[sc].translate > 36) {
                                scrollSwiper[sc].setTransition(tSpeed);
                                scrollSwiper[sc].setTranslate(36)
                            }
                        }
                    }

                } else {
                    topBar.transform('translateY(0px)');

                    if (scrollSwiper) {
                        for (sc = 0; sc < scrollSwiper.length; sc++) {
                            if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
                                scrollSwiper[sc].setTransition(tSpeed);
                                scrollSwiper[sc].setTranslate(72)
                            }
                        }
                    }
                }
            },
        }

    })
    //内容滚动
    var scrollSwiper = new Swiper('#scroll-v5', {
        //65是头部的高
        //36是top地址和搜索的高

        slidesOffsetBefore: 72,
        direction: 'vertical',
        freeMode: true,
        slidesPerView: 'auto',

        mousewheel: {
            releaseOnEdges: true,
        },
        on: {
            touchMove: function () {

                if (this.translate > 72 - 36 && this.translate < 72) {
                    topBar.transform('translateY(' + (this.translate - 72) + 'px)');
                }

            },
            touchStart: function () {
                startPosition = this.translate
            },
            touchEnd: function () {
                console.log("----touchEnd-----")
                topBar.transition(tSpeed)
                $('#page').animate({scrollTop: 0},10);
                if (this.translate > 36 && this.translate < 72 && this.translate < startPosition) {
                    topBar.transform('translateY(-36px)');
                    for (sc = 0; sc < scrollSwiper.length; sc++) {
                        if (scrollSwiper[sc].translate > 36) {
                            scrollSwiper[sc].setTransition(tSpeed);
                            scrollSwiper[sc].setTranslate(36)
                        }
                    }
                }
                if (this.translate > 36 && this.translate < 72 && this.translate > startPosition) {
                    topBar.transform('translateY(0px)');
                    for (sc = 0; sc < scrollSwiper.length; sc++) {
                        if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
                            scrollSwiper[sc].setTransition(tSpeed);
                            scrollSwiper[sc].setTranslate(72)
                        }
                    }
                }
            },

            transitionStart: function () {

                topBar.transition(tSpeed)
                if (this.translate < 72 - 36) {
                    topBar.transform('translateY(-36px)');
                    if (scrollSwiper) {
                        for (sc = 0; sc < scrollSwiper.length; sc++) {
                            if (scrollSwiper[sc].translate > 36) {
                                scrollSwiper[sc].setTransition(tSpeed);
                                scrollSwiper[sc].setTranslate(36)
                            }
                        }
                    }

                } else {
                    topBar.transform('translateY(0px)');

                    if (scrollSwiper) {
                        for (sc = 0; sc < scrollSwiper.length; sc++) {
                            if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
                                scrollSwiper[sc].setTransition(tSpeed);
                                scrollSwiper[sc].setTranslate(72)
                            }
                        }
                    }
                }
            },
        }

    })
</script>
<script type="text/javascript">
    $(function() {

        var newStyle = $("<style> @font-face {font-family: 'myFont';  src: url('../fonts/HYQiHei-50S.ttf');} </style>");
        $('body').append(newStyle);
    });
</script>
</body>
</html>